<template>
	<view class="login-page">
		<image src="/static/img/login/back.png" mode="" class="back"></image>
		<image src="/static/img/login/titke.png" mode="" class="login-title"></image>
		<view class="login-item">
			<view class="login-herder ">登录</view>
			<view class="login-form margin-top58">
				<u--form labelWidth="50" labelPosition="top" :model="model" :rules="rules" ref="uForm">
					<u-form-item label="手机号" prop="phone" borderBottom>
						<u--input type="number" placeholder="请输入手机号" v-model="model.phone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom>
						<u-input :type="passwordType == 0 ?'password':'text'" placeholder="请输入密码"
							v-model="model.password" border="none">
							<template slot="suffix">
								<image v-if="passwordType==0" src="/static/img/login/on.png" mode="" class="password"
									@click="passwordType =1">
								</image>
								<image v-if="passwordType==1" src="/static/img/login/off.png" mode="" class="password"
									@click="passwordType =0">
								</image>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
			</view>
			<view class="forget-passworder" @click="jumpTo('/pages-staging/register/register',{'name':'忘记密码'})">
				忘记密码
			</view>
			<view class="login-submit" @click="submit">
				登录
			</view>
			<view class="login-register">
				<text>没有账号？</text>
				<text class="register" @click="jumpTo('/pages-staging/register/register',{'name':'注册'})">立即注册</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					phone: "",
					password: ""
				},
				rules: {
					'phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'number',
						max: 11,
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				passwordType: 0
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(res);
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.back {
		width: 100%;
		height: 100vh;
	}

	.login-title {
		width: 302rpx;
		height: 148rpx;
		position: absolute;
		top: 173rpx;
		left: 224rpx
	}

	.login-item {
		width: 702rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 14rpx 8rpx 2rpx rgba(73, 87, 238, 0.08);
		opacity: 0.95;
		border-radius: 40rpx;
		position: absolute;
		top: 384rpx;
		left: 24rpx;
		padding: 51rpx 28rpx 97rpx 61rpx;

		.login-herder {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.password {
		width: 32rpx;
		height: 32rpx;
	}

	.forget-passworder {
		text-align: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FEB547;
		line-height: 130rpx;
	}

	.login-submit {
		margin: 0 auto;
		margin-top: 39rpx;
		width: 575rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #E7C18B 0%, #FFB445 100%);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.login-register {
		text-align: center;
		font-size: 27rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 26rpx;

		.register {
			font-size: 30rpx;
			text-decoration: underline;
		}
	}
</style>